import React, { useState, useRef, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image, Tag, Icon, Button, Tab, Tabs } from '@antmjs/vantui';
import Taro, { getMenuButtonBoundingClientRect } from '@tarojs/taro';
import { GetAppList } from "../../../../https/home";
import { HOST, diffTime, getRandomElements } from '../../../../utils/const'
import './index.scss'

const pla = { android: "安卓", ios: "苹果", windows: "windows", mac: 'mac' }

export default function HotApp() {
    const btn = getMenuButtonBoundingClientRect();
    const virtualListRef = useRef();
    const [tab, setTabs] = useState(1)
    const [listData, setListData] = useState([])

    useEffect(() => {
        getAPPList()
    }, [])

    const getAPPList = () => {
        Taro.showLoading('加载中')
        GetAppList().then((res) => {
            Taro.hideLoading()
            if (res.data.length > 0) {
                setListData(res.data)
            }
        })
    }

    const renderListView = (
        <VirtualList
            style={{ padding: 10, boxSizing: 'border-box' }}
            height="calc(100vh - 135px)"
            dataSource={getRandomElements(listData,30)}
            ref={virtualListRef}
            showCount={100}
            ItemRender={({ item }) => {
                return (
                    <View className='list-bg-view' onClick={()=>Taro.navigateTo({ url: `/pages/home/components/app_detail/index?id=${item.id}&version=${item.version}` })} >
                        <View className='img'>
                            <Image src={HOST + item?.icon} radius={'8%'} width={120} height={120} />
                        </View>
                        <View className='info-text'>
                            <View>
                                {item?.name}
                            </View>
                            <View className='tag-view'>
                                {item?.score && <><Icon name="star" color="#13b858" size={40} />
                                    <Text className="star-text">{item?.core}</Text></>}
                                <View className='version-view'>{item?.version || ""}</View>
                                <View className='version-view'>{item?.create_time ? diffTime(new Date(item?.create_time).getTime()) : '未知'}</View>
                            </View>
                            <View className='tag-view'>
                                <Tag className='tag' type="primary">{item?.platform ? pla[item.platform] : ''}</Tag>
                                <View className='version-view'>{item?.size || ''}</View>
                                <View className='separate-veiw'>·</View>
                                <View className='version-view'>{renderText(item)}</View>
                            </View>
                        </View>
                        <View className='time-view'>
                            <Button
                                onClick={()=>Taro.navigateTo({ url:`/pages/home/components/down_load_file/index?link=${item?.link}` })}
                                className='btn' type='primary' size='mini'>下载</Button>
                        </View>
                    </View>
                );
            }}
        />
    )

    const renderText = (item) => {
        if (tab == 1) {
            return `今日${item?.scors || 0}人下载`
        } else if (tab == 2) {
            return `今日${item?.downloadCnt || 0}人评分`
        }  else {
            return '今日1000人下载'
        }
    }

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='今日应用榜' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed />
            <Tabs style={{ paddingTop: btn.bottom + 20 }} onChange={(e) => {
                setTabs(e.detail.name)
            }} sticky={true} active={'1'} ellipsis={false}>
                <Tab title="今日下载榜" name="1">
                    {renderListView}
                </Tab>
                {/* <Tab title="今日投币榜" name="2">
                    {renderListView}
                </Tab> */}
                <Tab title="今日评分榜" name="2">
                    {renderListView}
                </Tab>
            </Tabs>
        </View>
    );
}